<template>
    <div class="m-25 mt-65">
        <div class="normal-box-mod">
            <div class="normal-box-hd clearfix">
                <div class="normal-box-title">
                    <div class="decorate-square"></div>
                    <h2>商品类别</h2>
                </div>
            </div>
            <div class="normal-box-bd">
                <div class="normal-list-page-mod">
                    <div class="mb-2">
                        <Button-group>
                            <Button custom-icon="iconfont icon-fangkuai2"
                                    size="small"
                                    type="primary"
                                    @click="showCreateModal">
                                新建大类
                            </Button>
                        </Button-group>
                    </div>
                    <div class="normal-list-page-bd">
                        <Table border
                               :loading="list.loading"
                               :columns="list.columns"
                               :data="list.tableData"
                               @on-selection-change="selectionChange"></Table>
                    </div>
                    <div class="normal-list-page-ft clearfix">
                        <Page class="fr"
                              :total="queryData.totalRecord"
                              :page-size="queryData.pageSize"
                              :current="queryData.page"
                              @on-change="changePage"
                              @on-page-size-change="onPageSizeChange"
                              show-elevator
                              show-total
                              show-sizer></Page>
                    </div>
                </div>

                <!--新建&修改 大类-->
                <Modal v-model="modal.mallCategory.isShow"
                       :loading="modal.mallCategory.loading"
                       :mask-closable="false"
                       :title="modal.mallCategory.title"
                       @on-ok="postData">
                    <Form ref="systemFrom"
                          :model="modal.mallCategory.formData"
                          :rules="modal.mallCategory.rules"
                          :label-width="120">
                        <FormItem label="父类id"
                                  prop="metaKey">
                            <Input disabled
                                   v-model="modal.mallCategory.formData.parentId"
                                   style="width:300px;" />
                        </FormItem>
                        <FormItem label="品类名称"
                                  prop="name">
                            <Input placeholder="请输入品类名称"
                                   v-model="modal.mallCategory.formData.name"
                                   style="width:300px;" />
                        </FormItem>
                        <FormItem label="关键词"
                                  prop="metaKey">
                            <Input placeholder="请输入关键词"
                                   v-model="modal.mallCategory.formData.metaKey"
                                   style="width:300px;" />
                        </FormItem>
                        <FormItem label="描述"
                                  prop="metaDescription">
                            <Input placeholder="请输入描述"
                                   type="textarea"
                                   v-model="modal.mallCategory.formData.metaDescription"
                                   style="width:300px;" />
                        </FormItem>
                        <FormItem label="上传/修改图片"
                                  prop="icon">
                            <upload-image ref="upload"
                                          :uploadList.sync="modal.mallCategory.formData.uploadList"
                                          @imageupload="calcImg"
                                          imgSize="1"></upload-image>
                        </FormItem>
                        <FormItem label="状态"
                                  prop="state">
                            <i-switch size="large"
                                      @on-change="change"
                                      v-model="modal.mallCategory.formData.state"
                                      :value="modal.mallCategory.formData.state">
                                <span slot="open">正常</span>
                                <span slot="close">停用</span>
                            </i-switch>
                        </FormItem>
                        <FormItem label="锁定"
                                  prop="isLock">
                            <i-switch size="large"
                                      @on-change="change"
                                      v-model="modal.mallCategory.formData.isLock"
                                      :value="modal.mallCategory.formData.isLock">
                                <span slot="open">锁定</span>
                                <span slot="close">解锁</span>
                            </i-switch>
                        </FormItem>
                    </Form>
                </Modal>
                <!--新建&修改 小类-->
                <Modal v-model="modal.mallCategory.Show"
                       :loading="modal.mallCategory.load"
                       :mask-closable="false"
                       :title="modal.mallCategory.title"
                       @on-ok="postDat">
                    <Form ref="systemFro"
                          :model="modal.mallCategory.formData"
                          :rules="modal.mallCategory.rules"
                          :label-width="120">
                        <FormItem label="父类id"
                                  prop="metaKey">
                            <Input disabled
                                   v-model="modal.mallCategory.formData.parentId"
                                   style="width:300px;" />
                        </FormItem>
                        <FormItem label="品类名称"
                                  prop="name">
                            <Input placeholder="请输入品类名称"
                                   v-model="modal.mallCategory.formData.name"
                                   style="width:300px;" />
                        </FormItem>
                        <FormItem label="关键词"
                                  prop="metaKey">
                            <Input placeholder="请输入关键词"
                                   v-model="modal.mallCategory.formData.metaKey"
                                   style="width:300px;" />
                        </FormItem>
                        <FormItem label="描述"
                                  prop="metaDescription">
                            <Input placeholder="请输入描述"
                                   type="textarea"
                                   v-model="modal.mallCategory.formData.metaDescription"
                                   style="width:300px;" />
                        </FormItem>
                        <FormItem label="上传/修改图片"
                                  prop="icon">
                            <upload-image ref="upload"
                                          :uploadList.sync="modal.mallCategory.formData.uploadList"
                                          @imageupload="calcImg"
                                          imgSize="1"></upload-image>
                        </FormItem>
                        <FormItem label="状态"
                                  prop="state">
                            <i-switch size="large"
                                      @on-change="change"
                                      v-model="modal.mallCategory.formData.state"
                                      :value="modal.mallCategory.formData.state">
                                <span slot="open">正常</span>
                                <span slot="close">停用</span>
                            </i-switch>
                        </FormItem>
                        <FormItem label="锁定"
                                  prop="isLock">
                            <i-switch size="large"
                                      @on-change="change"
                                      v-model="!!modal.mallCategory.formData.isLock"
                                      :value="!!modal.mallCategory.formData.isLock">
                                <span slot="open">锁定</span>
                                <span slot="close">解锁</span>
                            </i-switch>
                        </FormItem>
                    </Form>
                </Modal>
            </div>
        </div>
    </div>
</template>
<script>
import submenu from './submenu/MallCategory.vue'
import CategoryApi from '@/api/business/category.js'
// import moment from 'moment'
import { Message } from 'iview'
import WangEditor from '@/components/Editor/WangEditor.vue'
import Uploadoss from '@/components/uploadoss'
import uploadImage from '@/components/upload-image/upload-image'

export default {
	name: 'mallCategory',
	components: {
		uploadImage,
		WangEditor,
		Uploadoss
	},
	data() {
		return {
			// 弹出层数据
			modal: {
				mallCategory: {
					isShow: false,
					loading: true,
					Show: false,
					load: true,
					type: 'create', // create 新建，update 修改
					title: '新建',
					formData: {}
				}
			},
			// 列表
			list: {
				loading: false,
				selections: [],
				// 列表展示数据
				tableData: [],
				// 表格表头
				columns: [
					{
						type: 'selection',
						width: 60,
						align: 'center'
					},
					{
						type: 'expand',
						width: 60,
						align: 'center',
						render: (h, params) => {
							return this.$createElement(submenu, {
								ref: 'child',
								props: {
									row: params.row
								}
							})
						}
					},
					/** 开始自动生成 */
					{ title: 'id', minWidth: 80, key: 'id', align: 'center' },
					{
						title: '品类名称',
						minWidth: 100,
						key: 'name',
						align: 'center'
					},
					{
						title: '品类编码',
						minWidth: 100,
						key: 'code',
						align: 'center'
					},
					{
						title: '类目图标',
						key: 'icon',
						align: 'center',
						minWidth: 100,
						render: (h, params) => {
							return h('img', {
								attrs: {
									src: params.row.icon
								},
								style: {
									width: '50%',
									height: '50%'
								}
							})
						}
					},
					{
						title: '父类目ID',
						minWidth: 80,
						key: 'parentId',
						align: 'center'
					},
					{
						title: '关键词',
						minWidth: 80,
						key: 'metaKey',
						align: 'center'
					},
					{
						title: '描述',
						minWidth: 80,
						key: 'metaDescription',
						align: 'center'
					},
					{
						title: '状态',
						key: 'state',
						align: 'center',
						width: '130px',
						render: (create, params) => {
							let s = params.row.state
							let color, text
							if (s) {
								color = '#5ed71a'
								text = '正常'
							} else {
								color = '#d72c23'
								text = '停用 '
							}
							return create(
								'div',
								{
									style: {
										color: color,
										borderRadius: '20px'
									}
								},
								text
							)
						}
					},
					{
						title: '创建时间',
						align: 'center',
						key: 'createTime',
						minWidth: 100
					},
					{
						title: '更新时间',
						align: 'center',
						key: 'updateTime',
						minWidth: 100
					},
					/** 自动生成结束 */
					{
						title: '操作',
						align: 'center',
						minWidth: 150,
						render: (h, params) => {
							return h('div', { class: 'action-group' }, [
								h(
									'Tooltip',
									{
										props: {
											placement: 'left',
											content: '添加子类'
										},
										style: {
											cursor: 'pointer'
										}
									},
									[
										h(
											'Button',
											{
												props: {
													type: 'primary',
													size: 'small'
												},
												style: {
													marginRight: '5px',
													padding: '1px 2px'
												},
												on: {
													click: () => {
														// this.showUpdateModal(params.index);
														this.showCreateModa(
															params.row
														)
													}
												}
											},
											[
												h('Icon', {
													props: {
														type: 'md-add-circle',
														size: 18
													}
												})
											]
										)
									]
								),
								h(
									'Tooltip',
									{
										props: {
											placement: 'left',
											content: '编辑'
										},
										style: {
											cursor: 'pointer'
										}
									},
									[
										h(
											'Button',
											{
												props: {
													type: 'primary',
													size: 'small'
												},
												style: {
													marginRight: '5px',
													padding: '1px 2px'
												},
												on: {
													click: () => {
														// this.showUpdateModal(params.index);
														this.showUpdateModal(
															params.row
														)
													}
												}
											},
											[
												h('Icon', {
													props: {
														type:
															' iconfont icon-bianjisekuai',
														size: 18
													}
												})
											]
										)
									]
								),

								h(
									'Tooltip',
									{
										props: {
											placement: 'right',
											content: '删除'
										},
										style: {
											cursor: 'pointer'
										}
									},
									[
										h(
											'Button',
											{
												props: {
													type: 'error',
													size: 'small'
												},
												style: {
													marginRight: '5px',
													padding: '1px 2px'
												},
												on: {
													click: () => {
														this.delData(
															params.row.id
														)
													}
												}
											},
											[
												h('Icon', {
													props: {
														type:
															' iconfont icon-shanchusekuai',
														size: 18
													}
												})
											]
										)
									]
								)
							])
						}
					}
				]
			},
			// 页面查询数据
			queryData: {
				limit: 10,
				page: 1
			}
		}
	},
	methods: {
		// 获取列表
		getTableData() {
			const that = this
			that.queryData.totalRecord = undefined
			that.queryData.level = 1

			CategoryApi.getPageList(that.queryData)
				.then(res => {
					let list = res.data.list
					console.log(list, 'list')
					for (let i = 0; i < list.length; i++) {
						if (list[i].pid === 0) {
                            console.log('11111111')
							list[i].pid = '一级分类'
						} else {
                            console.log('22222222')

							list[i].pid = '二级分类'
						}
					}
					that.list.tableData = res.data.list
                    console.log(that.list.tableData,'that.list.tableData')
					that.queryData.totalRecord = res.data.totalRecord
					that.queryData.page = res.data.pageNum
					that.queryData.limit = res.data.pageSize
				})
				.catch(error => {
					Message.error(error)
				})
		},

		// 新建&修改
		postData() {
			const that = this
			that.$refs['systemFrom'].validate(valid => {
				if (valid) {
					if (!that.modal.mallCategory.formData.id) {
						// 新建
						that.modal.mallCategory.formData.level = 1
						that.modal.mallCategory.formData.isLock = 1
						CategoryApi.add(that.modal.mallCategory.formData)
							.then(res => {
								that.modal.mallCategory.isShow = falsetableData
								that.modal.mallCategory.loading = false
								if (!res.code) {
									that.getTableData()
									that.$Notice.success({
										title: '保存成功!'
									})
								} else {
									that.$Notice.error({
										title: res.message
									})
								}
							})
							.catch(error => {
								Message.error(error)
							})
					} else {
						// 修改
						CategoryApi.update(
							that.modal.mallCategory.formData.id,
							that.modal.mallCategory.formData
						)
							.then(res => {
								that.modal.mallCategory.isShow = false
								that.modal.mallCategory.loading = false
								if (!res.code) {
									that.getTableData()
									that.$Notice.success({
										title: '保存成功!'
									})
								} else {
									that.$Notice.error({
										title: res.message
									})
								}
							})
							.catch(error => {
								Message.error(error)
							})
					}
				} else {
					that.modal.mallCategory.loading = false
					that.$nextTick(() => {
						that.modal.mallCategory.loading = true
					})
				}
			})
		},
		// 图片校验
		calcImg() {
			let imgUrl = this.modal.mallCategory.formData.uploadList.map(v => {
				if (v.length < 1) return v
				v = v.response.res.requestUrls[0]
				return v
			})
			this.modal.mallCategory.formData.icon = imgUrl[0]
		},
		// 新建&修改
		postDat() {
			const that = this
			that.$refs['systemFro'].validate(valid => {
				if (valid) {
					CategoryApi.add(that.modal.mallCategory.formData)
						.then(res => {
							that.modal.mallCategory.Show = false
							that.modal.mallCategory.load = false
							if (!res.code) {
								that.getTableData()
								that.$Notice.success({
									title: '保存成功!'
								})
							} else {
								that.$Notice.error({
									title: res.message
								})
							}
						})
						.catch(error => {
							Message.error(error)
						})
				} else {
					that.modal.mallCategory.load = false
					that.$nextTick(() => {
						that.modal.mallCategory.load = true
					})
				}
			})
		},

		// 删除
		delData(ids) {
			this.$Modal.confirm({
				title: '确认删除',
				content:
					'<p>您确认删除id为 <strong>' +
					ids.toString() +
					'</strong> 的品类吗?</p><p>删除后将无法撤销，请谨慎操作！</p>',
				loading: true,
				onOk: () => {
					CategoryApi.del(ids).then(res => {
						this.$Modal.remove()
						if (!res.code) {
							this.$Notice.success({
								title: '删除成功'
							})
							this.queryData.page = 1
							this.getTableData()
						} else {
							this.$Notice.error({
								title: res.message
							})
						}
					})
				}
			})
		},

		// 排量删除
		batchDel() {
			let ids = []
			this.list.selections.forEach(element => {
				ids.push(element.id)
			})
			if (!ids.length) {
				this.$Message.error({
					content: '请先选择要删除的项！',
					duration: 3
				})
			}
			this.delData(ids)
		},

		// 全选，不全选
		selectionChange(args) {
			this.list.selections = args
		},

		// 每页显示记录数变更
		onPageSizeChange(pageSize) {
			this.queryData.limit = pageSize
			this.getTableData()
		},

		// 换页
		changePage(page) {
			this.queryData.page = page
			this.getTableData()
		},

		// 显示新建弹窗
		showCreateModal() {
			this.modal.mallCategory.type = 'create'
			this.modal.mallCategory.title = '新建'
			this.modal.mallCategory.formData = {
				parentId: 0,
				level: 1,
				isLock: false,
				state: true
			}
			this.modal.mallCategory.isShow = true
		},
		//
		// showCreateZilei (id) {
		//   this.modal.mallCategory.type = 'create'
		//   this.modal.mallCategory.title = '新建子类'
		//   this.modal.mallCategory.formData.id = id
		//   this.modal.mallCategory.Show = true
		// },
		// 显示新建子菜单弹窗
		showCreateModa(e) {
			console.log(e, 'e')
			this.modal.mallCategory.type = 'create'
			this.modal.mallCategory.title = '新建'
			this.modal.mallCategory.formData = {}
			this.modal.mallCategory.formData.level = 2
			this.modal.mallCategory.formData.isLock = 1
			//  this.modal.mallCategory.formData.code = e[0].code
			this.modal.mallCategory.formData.parentId = e.id
			this.modal.mallCategory.Show = true
		},

		// 显示修改弹窗
		showUpdateModal(row) {
			console.log('===row===', row)
			this.modal.mallCategory.type = 'update'
			this.modal.mallCategory.title = '修改'
			// 不请求后端，直接list取对象
			// this.modal.mallCategory.formData = JSON.parse(
			//   JSON.stringify(this.list.tableData)
			// )[index];
			const that = this
			that.modal.mallCategory.formData = row
			let item = {
				status: 'finished',
				response: {
					res: {
						requestUrls: []
					}
				}
			}
			item.response.res.requestUrls.push(row.icon)
			that.modal.mallCategory.formData.uploadList = []
			that.modal.mallCategory.formData.uploadList.push(item)
			this.modal.mallCategory.isShow = true
		}
	},
	created() {
		this.getTableData()
	}
}
</script>
